« Previous Next »

JavaScript Error Handling

try, catch, and finally Example
            
              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="tryCatchOutput" style="color: red;"></div>
                      <Script>
                                try {
                                        let x = 10;
                                        let y = x + z; // Error: z is not defined
                                    } catch (error) {
                                        document.getElementById("tryCatchOutput").innerText = "Error caught: " + error.message;
                                    } finally {
                                        console.log("Finally block executed.");
                                    }
                     </Script>
              </body>
              </html>
Output:

throw Statement Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="throwOutput" style="color: red;"></div>
                      <Script>
                         function checkAge(age) {
                                      if (age < 18) {
                                                        throw new Error("Age must be 18 or older.");
                                                    }
                                                    return "You are eligible!";
                                                }
                                            try {
                                                    document.getElementById("throwOutput").innerText = checkAge(16);
                                                } catch (error) {
                                                    document.getElementById("throwOutput").innerText = "Error: " + error.message;
                                                }
                     </Script>
              </body>
              </html>
Output:

1. throw Statement:

Defines a custom error. Used to throw an exception.

throw new Error("This is a custom error message.");
Example:
function throwError() { throw new Error("This is a custom error message."); } try { throwError(); } catch (err) { document.getElementById("throwExampleOutput").innerText = err.message; }
Output:

2. try and catch Pair:

The try statement allows you to define a block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to be executed if an error occurs in the try block.

Syntax:
try { // Block of code to try } catch (err) { // Block of code to handle errors }
Example:
try { let result = someUndefinedVariable * 2; console.log(result); // This line will not be executed } catch (err) { document.getElementById("tryCatchExampleOutput").innerText = "An error occurred: " + err.message; }
Output:

« Previous Next »